<template>
  <div class="app-container">
    <div v-if="!detailOpen">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['organization:organization:add']"
          >
            新增
          </el-button>
          <el-button
            type="info"
            size="mini"
            @click="toggleExpandAll"
          >
            展开/折叠
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-if="refreshTable"
        v-loading="loading"
        :data="orgList"
        row-key="organizationId"
        :default-expand-all="isExpandAll"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @row-click="viewDetail"
        class="aaaa"
      >
        <el-table-column prop="organizationName" label="名称" align="left">
          <template slot-scope="scope">
            <i class="el-icon-office-building" style="font-size: 25px;position: relative;top: 2px;"></i>
            <span style="font-size: 18px;margin: 0 5px;">{{ scope.row.organizationName }}</span>
            <el-tag v-if="scope.row.organizationIsVirtual==='1'">虚拟组织</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="organizationCode" label="编码" width="100" align="center"></el-table-column>
        <el-table-column prop="organizationTypeName" label="类型" width="120" align="center"></el-table-column>
        <el-table-column prop="organizationPrincipalName" label="负责人" width="100" align="center"></el-table-column>
        <el-table-column prop="directPostNum" width="200" align="center">
          <template slot="header" slot-scope="scope">
            直属岗位
            <span>
              <el-tooltip content="该单位直接设置的所有岗位个数" placement="right">
              <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="directEmployeeNum" label="直属员工" width="200" align="center">
          <template slot="header" slot-scope="scope">
            直属员工
            <span>
              <el-tooltip content="该单位直接管理的所有员工个数" placement="right">
              <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="allEmployeeNum" label="在职员工" width="200" align="center">
          <template slot="header" slot-scope="scope">
            在职员工
            <span>
              <el-tooltip content="该单位及下级单位的所有员工个数" placement="right">
              <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="allEmployeeNum" label="操作" width="250" align="center">
          <template slot-scope="scope">
              <span class="org-oper">
                <el-button
                  size="mini"
                  type="primary"
                  @click.stop="handleAdd(scope.row)"
                  v-hasPermi="['organization:organization:add']"
                ><!-- v-if="Number.parseInt(scope.row.organizationLevel) < organizationLevelTypes.length-1" -->
                  新增下级
                </el-button>
                <el-button
                  size="mini"
                  type="warning"
                  @click.stop="handleUpdate(scope.row)"
                  v-hasPermi="['organization:organization:edit']"
                >
                  修改
                </el-button>

                <el-button
                  v-if="scope.row.parentId != 0"
                  size="mini"
                  type="danger"
                  @click.stop="handleDelete(scope.row)"
                  v-hasPermi="['organization:organization:remove']"
                >
                  删除
                </el-button>
              </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑组件 -->
    <edit v-if="editOpen" :prop="editData" @close="closeEdit"></edit>
    <detail v-if="detailOpen" :prop="detailData" @close="closeDetail"></detail>
  </div>
</template>
<script>
  import {getList,del} from '@/api/organization/organization/organization.js'
  import edit from '@/views/organization/organization/edit.vue'
  import detail from '@/views/organization/organization/detail.vue'
  import {organizationLevelTypes} from '@/utils/constants/common/constants.js'
  export default {
    name: "OrganizationIndex",
    components: { edit , detail},
    data() {
      return {
        loading: false,
        switchData:[
          {value:'1',label:'是'},
          {value:'0',label:'否'}
        ],
        organizationLevelTypes:organizationLevelTypes,
        orgList:[],
        isExpandAll: true,
        refreshTable: true,
        editOpen:false,
        editData:{
          title:'新增',
          open:null,
          level:null,
          parentId:null,
          editId:null,
          isRoot:false
        },
        detailOpen:false,
        detailData:{
          id:null,
          title:'新增'
        },
        // 查询参数
        queryParams: {
          organizationName: undefined,
          organizationCode: undefined,
          organizationTypeId: undefined,
          organizationIsVirtual: undefined,
          isEnable:undefined
        },
      };
    },
    mounted() {
      this.getList()
    },
    methods: {
      /** 展开/折叠操作 */
      toggleExpandAll() {
        this.refreshTable = false;
        this.isExpandAll = !this.isExpandAll;
        this.$nextTick(() => {
          this.refreshTable = true;
        });
      },
      getList(){
        getList(this.queryParams).then(res =>{
          this.orgList = this.handleTree(res.data, "organizationId","organizationParentId");
          this.loading = false
        }).catch(err =>{
          this.loading = false
          console.log('错误原因：',err)
        })
      },
      /** 新增按钮操作 */
      handleAdd(row) {
        console.log(row)
        if (row != null && row.organizationId && row.organizationLevel) {
          this.editData.parentId = row.organizationId;
          this.editData.isRoot = false
          this.editData.level = Number.parseInt(row.organizationLevel) +1
        } else {
          this.editData.isRoot = true
          this.editData.parentId = "0";
          this.editData.level = 0
        }
        this.editData.title = '新增'
        this.editData.editId = null
        this.editData.open = true
        this.editOpen = true
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        if(row.organizationParentId === "0"){
          this.editData.isRoot = true
        }else{
          this.editData.isRoot = false
        }
        this.editData.parentId = row.organizationParentId;
        this.editData.title = "修改";
        this.editData.editId = row.organizationId
        this.editData.open = true
        this.editOpen = true
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('是否删除该组织机构？','确认信息',{
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then(()=>{
          del(row.organizationId).then(res =>{
            if(res.code === 200){
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.getList()
            }else{
              this.$message({
                type: 'warning',
                message: res.msg||'该组织机构已被使用，无法删除'
              })
            }
          })
        }).catch(action => {

        });
      },
      closeEdit(){
        this.editOpen = false
        this.getList()
      },
      viewDetail(row, column, event){
        this.detailOpen = true
        this.detailData.id = row.organizationId
      },
      closeDetail(){
        this.detailOpen = false
      },
    },
    updated() {

    },
  };
</script>
<style scoped>
>>> .aaaa .el-table__row .cell{
  /* width:24px;border-top: 2px dashed #eee; */
}
</style>
